<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./templates/templateMenu.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html">

    <ui:define name="content">
        <script type="text/javascript"> //Reactualiza la tabla luego de eliminar pues necesatita doble actualizacion
            function confirmFunction() {
                updateConfirm.jq.click();
            } 
        </script>

        <p:panel header="Secciones" >
            <h:panelGrid columns="3" id="frmSeccion">    
                <h:outputText value="Año Escolar: "/>
                <h:selectOneMenu id="cboAnio" 
                                 value="#{seccionBean.selectedAnio}" 
                                 required="#{param['requireGroup1'] == '1'}" 
                                 requiredMessage="Requerido" >
                    <f:selectItem itemLabel="-Seleccione una Opción-" value="#{null}"/>
                    <f:selectItems value="#{anioEscolar.cargarAnios()}" />
                </h:selectOneMenu>
                <p:message for="cboAnio"/>                
                <h:outputText value="Nivel:"/>
                <h:selectOneMenu id="cboNivel" 
                                 onchange="onSelectNivel()"
                                 value="#{seccionBean.selectedNivel}" 
                                 required="#{param['requireGroup1'] == '1'}" 
                                 requiredMessage="Requerido" >
                    <f:selectItem itemLabel="-Seleccione una Opción-" value="#{null}"/>
                    <f:selectItems value="#{nivelBean.cargarNiveles()}" />
                </h:selectOneMenu>
                <p:message for="cboNivel"/>

                <h:outputText value="Grado:"/>
                <h:selectOneMenu id="cboGrado" value="#{seccionBean.selectedGrado}" 
                                 required="#{param['requireGroup1'] == '1'}" 
                                 requiredMessage="Requerido" >
                    <f:selectItem itemLabel="-Seleccione una Opción-" value="#{null}"/>
                    <f:selectItems value="#{seccionBean.listaGrados}" />
                </h:selectOneMenu>
                <p:message for="cboGrado"/>   

                <h:outputText value="Turno:"/>
                <h:selectOneRadio id="cboTurno"  value="#{seccionBean.seccion.vcTurno}"
                                  required="#{param['requireGroup1'] == '1'}"
                                  requiredMessage="Requerido">
                    <f:selectItem itemLabel="Mañana" itemValue="1" />
                    <f:selectItem itemLabel="Tarde" itemValue="2" />
                </h:selectOneRadio>
                <p:message for="cboTurno"/>

                <h:outputText value="Sección:"/>
                <p:inputText id="txtSeccion" value="#{seccionBean.seccion.vcSeccion}" 
                             required="#{param['requireGroup1'] == '1'}" 
                             requiredMessage="Requerido" 
                             maxlength="1" />
                <p:message for="txtSeccion"/>               

                <h:outputText value="Aula:"/>
                <p:inputText  value="#{seccionBean.seccion.vcAula}" />
                <h:outputText />
            </h:panelGrid>

            <h:panelGrid style="width: 100%">
                <p:toolbar>
                    <p:toolbarGroup align="left">      
                        <p:commandButton value="Nuevo"
                                         title="Nuevo"
                                         action="#{seccionBean.nuevo}"
                                         update="frmSeccion"
                                         process="@this"
                                         image="ui-icon-document"/>
                        <p:commandButton value="Guardar" 
                                         action="#{seccionBean.crear}"
                                         process="@this frmSeccion" 
                                         oncomplete="confirmFunction();"
                                         update="frmSeccion msg"
                                         title="Guardar" 
                                         image="ui-icon-disk"> 
                            <f:param name="requireGroup1" value="1"/>
                        </p:commandButton> 
                    </p:toolbarGroup>
                </p:toolbar>
            </h:panelGrid>

            <p:dataTable id="dtSeccion" 
                         widgetVar="dtSeccion"                                        
                         rows="10" 
                         paginator="true" 
                         var="varSeccion" 
                         value="#{seccionBean.secciones}"
                         onRowEditUpdate="msg">

                <f:facet name="header">  
                    <h:panelGrid style="width: 200px;" columnClasses="alignLeft,alignLeft,alignLeft" columns="3">
                        <h:outputText value="Buscar: " />  
                        <p:inputText  id="globalFilter" onkeyup="dtSeccion.filter()" style="width:150px" />  
                    </h:panelGrid> 
                </f:facet>  
                <p:column filterBy="#{varSeccion[3].nuAnio}" 
                          filterStyle="display: none"
                          headerText="Nivel" 
                          style="text-align: center; width: 15%;">
                    <h:outputText value="#{varSeccion[3].nuAnio}"/>
                </p:column>                

                <p:column filterBy="#{varSeccion[2].vcNomNivel}" 
                          filterStyle="display: none"
                          headerText="Nivel" 
                          style="text-align: center; width: 15%;">
                    <h:outputText value="#{varSeccion[2].vcNomNivel}"/>
                </p:column>

                <p:column filterBy="#{varSeccion[1].vcNomGrado}" 
                          style="text-align: center;"
                          filterStyle="display: none" 
                          headerText="Nombre Grado">
                    <h:outputText value="#{varSeccion[1].vcNomGrado}"/>
                </p:column> 

                <p:column filterBy="#{varSeccion[0].vcSeccion}"
                          filterStyle="display: none"
                          headerText="Sección" style="text-align: center;" >
                    <h:outputText value="#{varSeccion[0].vcSeccion}"/>
                </p:column> 

                <p:column filterBy="#{varSeccion[0].vcTurno=='2'?'Tarde':'Mañana'}" 
                          filterStyle="display: none" 
                          headerText="Turno" style="text-align: center; width: 15%;" >
                    <h:outputText value="#{varSeccion[0].vcTurno=='1'?'Mañana':'Tarde'}"/>
                </p:column> 
                <p:column style="width: 75px; text-align: center; " headerText="Acciones" >  
                    <f:facet name="header"/>
                    <p:commandButton  image="ui-icon-pencil" 
                                      title="Modificar Sección"
                                      action="#{seccionBean.modificar}"
                                      update="frmSeccion"
                                      process="@this">  
                        <f:setPropertyActionListener value="#{varSeccion}" target="#{seccionBean.selectedSeccion}" />
                    </p:commandButton> 
                    <p:commandButton  image="ui-icon-trash"
                                      title="Eliminar Sección"
                                      oncomplete="confirmation.show()" 
                                      update="confirm" 
                                      process="@this">  
                        <f:setPropertyActionListener value="#{varSeccion}" target="#{seccionBean.selectedSeccion}" />
                    </p:commandButton>  
                </p:column> 
            </p:dataTable>
        </p:panel>
        <p:confirmDialog message="Desea eliminar el registro?" 
                         width="400"   
                         header="Confirm" 
                         severity="alert" 
                         widgetVar="confirmation" 
                         modal="true">  
            <p:outputPanel id="confirm">
                <h:panelGrid>
                    <h:outputText  value="Sección: #{seccionBean.selectedSeccion[1].vcNomGrado} #{seccionBean.selectedSeccion[0].vcSeccion}"/>
                    <h:panelGrid columns="2">
                        <p:commandButton value="Si" 
                                         action="#{seccionBean.eliminar}" 
                                         oncomplete="confirmation.hide(); confirmFunction(); dtSeccion.filter()" 
                                         update="frmSeccion dtSeccion msg"
                                         process="@this">
                            <f:param name="idSeccion" 
                                     value="#{seccionBean.selectedSeccion[0].idSeccion}"/>
                        </p:commandButton>
                        <p:commandButton value="No" 
                                         onclick="confirmation.hide()" 
                                         type="button" />    
                    </h:panelGrid>
                </h:panelGrid>
            </p:outputPanel>
        </p:confirmDialog>
        <p:commandButton style="visibility: hidden" 
                         widgetVar="updateConfirm"
                         oncomplete="dtSeccion.filter()" 
                         update="dtSeccion msg"/>

        <p:remoteCommand name="onSelectNivel" process="@this cboNivel" 
                         update="cboGrado" action="#{seccionBean.onSelectNivel}"/>
    </ui:define>

</ui:composition>
